<template>
  <div id="download">
    <div class="searchBar">
      <el-input v-model="searchTitle"
              placeholder="请输入内容"
              clearable>
      </el-input>
      <el-button type="primary"
                 @click="filterContract"
                 icon="el-icon-search">搜索</el-button>
    </div>
    <div class="searchForm">
      <el-card class="box-card">
        <div v-for="(item,index) in searchForm" :key="index" class="text item">
          <span>{{item.title}}:</span>
          <template v-for="(item2,index2) in item.item" >
            <el-button
                       @click="filterContract(index,item2)"
                    class="chooseItem">{{item2}}</el-button>
          </template>
        </div>
      </el-card>

    </div>
    <div class="show">
      <div class="file" v-for="(item,index) in files" :key="index">
        <h3 v-for="(item1,index1) in contractType"
            v-if="item1.key === item.co_kind ">{{item1.name}}</h3>
        <div>{{item.co_title}}</div>
        <a class='download'
           :href='item.co_url'
           download=""
           title="下载">
        <el-button type="primary" class="down">
         下载
        </el-button>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import {cloneObject} from "../../../utils/common";
  import {dictionary} from "../../../utils/allDictionary";

  export default {
    name: "Dowmload",
    mounted() {
      let url = 'https://haotry.top/api/admin/getContractByKey'

      axios.post(url,JSON.stringify({co_kind : 0 , co_title : ''}),{
        headers:{
          'Content-Type':'application/json'
        }
      }).then(res => {
        console.log(res)
        if(res.status === 200){
          this.files = res.data
        }
        else{
          alert('查询失败')
        }
      })
    },
    data(){
      return{
        files : [],
        searchForm:dictionary.contractSearch,
        contractType: dictionary.contractType,
        searchTitle : ''
      }
    },
    methods:{
      filterContract(type,title)
      {
        let postData = {}

        if( !(typeof type == 'undefined'))
        {
          console.log('undefined')
          if (title == '全部') title = ''
          postData = {co_kind : type+1, co_title : title}
        }
        else{
          postData = {co_title : this.searchTitle}
        }
        console.log(postData)
        let url = 'https://haotry.top/api/admin/getContractByKey'

        axios.post(url,JSON.stringify(postData),{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res => {
          console.log(res)
          if(res.status === 200){
            this.files = res.data
          }
          else{
            alert('查询失败')
          }
        })
      }
    }
  }
</script>

<style scoped>
  .searchBar{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  .el-input{
    width: 400px;
  }
  .text {
    font-size: 10px;
  }

  .item {
    margin-bottom: 10px;
    border-bottom: 1px dashed #9c9797;
  }
  .el-card__header{
    padding: 0 20px !important;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .searchForm{
    text-align: left;
  }
  .chooseItem{
    /*border: none;*/
    padding: 5px;
    margin: 5px;
  }
  .show{
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
  }
  .file{
    border-radius: 10px;
    width: 200px;
    height: 200px;
    background-color: #dbe7f6;
    margin: 30px;
  }
  .down{
    margin-top: 40px;
    width: 100px;
  }

  a{
    text-decoration: none;
    width: 100%;
  }
</style>